<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh">
<head>
    <script src="/home/js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="/home/js/axios.js" type="text/javascript" charset="utf-8"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>支付宝电脑网站支付</title>
    <script type="text/javascript" src="/home/js/vue.js"></script>
    <script type="text/javascript" src="/home/js/axios.js"></script>
    <script type="text/javascript" src="/home/js/config.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, ol {
            list-style: none;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
            sans-serif;
        }

        .tab-head {
            margin-left: 120px;
            margin-bottom: 10px;
        }

        .tab-content {
            clear: left;
            display: none;
        }

        h2 {
            border-bottom: solid #02aaf1 2px;
            width: 200px;
            height: 25px;
            margin: 0;
            float: left;
            text-align: center;
            font-size: 16px;
        }

        .selected {
            color: #FFFFFF;
            background-color: #02aaf1;
        }

        .show {
            clear: left;
            display: block;
        }

        .hidden {
            display: none;
        }

        .new-btn-login-sp {
            padding: 1px;
            display: inline-block;
            width: 75%;
        }

        .new-btn-login {
            background-color: #02aaf1;
            color: #FFFFFF;
            font-weight: bold;
            border: none;
            width: 100%;
            height: 30px;
            border-radius: 5px;
            font-size: 16px;
        }

        #main {
            width: 100%;
            margin: 0 auto;
            font-size: 14px;
        }

        .red-star {
            color: #f00;
            width: 10px;
            display: inline-block;
        }

        .null-star {
            color: #fff;
        }

        .content {
            margin-top: 5px;
        }

        .content dt {
            width: 100px;
            display: inline-block;
            float: left;
            margin-left: 20px;
            color: #666;
            font-size: 13px;
            margin-top: 8px;
        }

        .content dd {
            margin-left: 120px;
            margin-bottom: 5px;
        }

        .content dd input {
            width: 85%;
            height: 28px;
            border: 0;
            -webkit-border-radius: 0;
            -webkit-appearance: none;
        }

        #foot {
            margin-top: 10px;
            position: absolute;
            bottom: 15px;
            width: 100%;
        }

        .foot-ul {
            width: 100%;
        }

        .foot-ul li {
            width: 100%;
            text-align: center;
            color: #666;
        }

        .note-help {
            color: #999999;
            font-size: 12px;
            line-height: 130%;
            margin-top: 5px;
            width: 100%;
            display: block;
        }

        #btn-dd {
            margin: 20px;
            text-align: center;
        }

        .one_line {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #eeeeee;
            width: 100%;
            margin-left: 20px;
        }

        .am-header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: box;
            width: 100%;
            position: relative;
            padding: 7px 0;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            background: #3d75f4;
            height: 50px;
            text-align: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            box-pack: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            box-align: center;
        }

        .am-header h1 {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            box-flex: 1;
            line-height: 18px;
            text-align: center;
            font-size: 18px;
            font-weight: 300;
            color: #fff;
        }

    </style>
    <script>
        // 从URL获取参数
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }

        // 页面加载时填充数据
        $(document).ready(function () {
            // 从URL获取订单号和总票价
            let orderId = getQueryString('orderId') || getQueryString('order_id') || getQueryString('order_no');
            let total_price = getQueryString('total_price');

            // 如果没有从URL获取到，从表单中获取
            if (!orderId) {
                orderId = $('#order_id').val();
            }

            if (orderId) {
                $("#order_id").val(orderId);

                // 如果有总票价参数，显示总票价
                if (total_price) {
                    $("#total_price").val(total_price + "元");
                } else {
                    $("#total_price").val("0.01元"); // 默认测试金额
                }
            } else {
                console.log('未找到订单信息，使用测试数据');
                $("#order_id").val("TEST" + new Date().getTime());
                $("#total_price").val("0.01元");
            }

            // 显示当前配置信息用于调试
            console.log('支付宝支付配置信息:');
            console.log('页面URL:', window.location.href);
            console.log('当前域名:', window.location.origin);
            // 统一使用localhost:8081作为notify_url的域名，确保与后端配置一致
            console.log('Notify URL:', 'http://localhost:8081' + '/api/alipay/notify');
            console.log('订单ID:', $("#order_id").val());
        });

        // 显示加载状态
        function showLoading(show) {
            const loadingElement = document.getElementById('alipayResult');
            if (loadingElement) {
                loadingElement.style.display = show ? 'block' : 'none';
            }
            // 禁用或启用付款按钮
            const payButton = document.querySelector('.new-btn-login');
            if (payButton) {
                payButton.disabled = show;
            }
        }

        // 显示错误消息
        function showError(message) {
            alert('错误: ' + message);
            showLoading(false);
        }

        // 支付宝沙箱支付 - 前后端分离方式实现
        function Pay() {
            let orderId = $("#order_id").val();
            let total_price_text = $("input[readonly]:eq(1)").val();
            let total_price = total_price_text.replace('元', '');

            // 确保金额格式正确
            let formattedPrice = parseFloat(total_price);
            if (!isNaN(formattedPrice)) {
                total_price = formattedPrice.toFixed(2);
            }

            // 验证订单信息
            if (!orderId || orderId.trim() === '') {
                showError('订单号无效，请刷新页面重试');
                return;
            }

            const price_value = parseFloat(total_price);
            if (isNaN(price_value) || price_value <= 0) {
                showError('支付金额无效，请刷新页面重试');
                return;
            }

            if (confirm("确认要支付 " + total_price_text + " 吗？")) {
                showLoading(true);

                // 获取回调URL
                function getCallbackUrl(page) {
                    return window.location.origin + '/home/order/' + page + '?orderId=' + orderId + '&total_price=' + total_price + '&subject=中国梦想游票务支付订单';
                }

                // 统一使用localhost:8081作为notify_url的域名
                const notifyUrl = 'http://localhost:8081' + '/api/alipay/notify';

                console.log('调用后端createForm接口，传递参数:');
                console.log('orderId:', orderId);
                console.log('total_price:', total_price);
                console.log('return_url:', getCallbackUrl('pay_success.html'));
                console.log('notify_url:', notifyUrl);

                axios({
                    method: 'post',
                    url: '/api/alipay/createForm',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    params: {
                        orderId: orderId,
                        total_price: total_price,
                        subject: '中国梦想游票务支付订单',
                        return_url: getCallbackUrl('pay_success.html'),
                        notify_url: notifyUrl // 统一使用localhost:8081的notify_url
                    },
                    data: {
                        orderId: orderId,
                        total_price: total_price,
                        subject: '中国梦想游票务支付订单',
                        return_url: getCallbackUrl('pay_success.html'),
                        notify_url: notifyUrl // 统一使用localhost:8081的notify_url
                    }
                })
                    .then(response => {
                        // 假设后端返回的是完整的表单HTML
                        if (response) {
                            // 先处理获取到的表单
                            submitAlipayForm(response.data);

                            // 然后发起携带订单号的请求到notify接口
                            console.log('发起notify请求，携带订单号:', orderId);
                            axios.post(`/api/alipay/notify/${orderId}`)
                            .then(notifyResponse => {
                                console.log('Notify请求成功响应:', notifyResponse.data);
                            })
                            .catch(notifyError => {
                                console.error('Notify请求失败:', notifyError);
                                // 注意：即使notify请求失败，也不应影响主支付流程
                            });
                        } else {
                            showError('获取支付表单失败，请重试');
                        }
                    })
                    .catch(error => {
                        console.error('请求支付表单失败:', error);
                        // 如果接口调用失败，使用备用的前端表单生成方式
                        console.log('使用备用的前端表单生成方式');
                        createBackupAlipayForm(orderId, total_price);
                    })
                    .finally(() => {
                        showLoading(false);
                    });
            }
        }

        // 提交支付宝表单
        function submitAlipayForm(formHtml) {
            // 创建一个临时容器来解析HTML
            const tempContainer = document.createElement('div');
            tempContainer.innerHTML = formHtml;

            // 获取表单元素
            const formElement = tempContainer.querySelector('form');
            if (formElement) {
                // 设置表单目标为新窗口
                formElement.target = '_blank';

                // 添加到页面并提交
                document.body.appendChild(formElement);
                formElement.submit();

                // 提交后移除表单
                setTimeout(function () {
                    if (document.body.contains(formElement)) {
                        document.body.removeChild(formElement);
                    }
                }, 100);

                // 监听支付结果，这里可以根据实际情况进行调整
                // 例如：定期检查订单状态，或者在页面关闭时检查
                setTimeout(() => {
                    checkPaymentStatus();
                }, 2000); // 5秒后开始检查支付状态
            } else {
                showError('无效的支付表单，请重试');
            }
        }

        // 检查支付状态
        function checkPaymentStatus() {
            const orderId = $("#order_id").val();
            const total_price_text = $("input[readonly]:eq(1)").val();
            let total_price = total_price_text.replace('元', '');

            // 确保金额格式正确
            let formattedPrice = parseFloat(total_price);
            if (!isNaN(formattedPrice)) {
                total_price = formattedPrice.toFixed(2);
            }

            // 模拟检查支付状态
            const checkStatusInterval = setInterval(() => {
                // 获取回调URL并添加到检查状态请求中
                const callbackUrl = getCallbackUrl('pay_success.html');
                axios.get(`/api/alipay/checkStatus?orderId=${orderId}&total_price=${total_price}&subject=中国梦想游票务支付订单&return_url=${encodeURIComponent(callbackUrl)}`)
                    .then(response => {
                        if (response.data && response.data.status === 'SUCCESS') {
                            clearInterval(checkStatusInterval);
                            // 支付成功，跳转到支付成功页面
                            window.location.href = `/home/order/pay_success.html?orderId=${orderId}&total_price=${total_price}`;
                        }
                    })
                    .catch(error => {
                        console.error('检查支付状态失败:', error);
                    });
            }, 2000); // 每3秒检查一次

            // 设置最大检查时间（5分钟）
            setTimeout(() => {
                clearInterval(checkStatusInterval);
                console.log('支付检查超时');
            }, 5 * 60 * 1000);
        }

        // 备用的前端表单生成方式（当后端接口不可用时使用）
        function createBackupAlipayForm(orderId, total_price) {
            // 支付宝沙箱网关
            const alipayGateway = 'https://openapi.alipaydev.com/gateway.do';

            // 获取回调URL
            const returnUrl = getCallbackUrl('pay_success.html');

            // 异步通知地址 - 使用完整URL确保支付宝能正确访问
            // 注意：这里直接使用完整URL而不是相对路径

            // 验证并格式化参数
            if (!orderId || orderId.trim() === '') {
                showError('订单号无效');
                return;
            }

            // 确保金额格式正确（保留两位小数的字符串）
            let formattedPrice = parseFloat(total_price);
            if (isNaN(formattedPrice) || formattedPrice <= 0) {
                showError('支付金额无效');
                return;
            }
            formattedPrice = formattedPrice.toFixed(2);

            // 构建表单
            const form = $('<form/>', {
                'action': alipayGateway,
                'method': 'post',
                'target': '_blank'
            });

            // 添加支付参数 - 确保参数符合支付宝接口要求
            const notifyUrl = 'http://localhost:8081' + '/api/alipay/notify';

            // 构建基础参数
            let params = {
                'app_id': '9021000153677290', // 支付宝沙箱应用ID
                'method': 'alipay.trade.page.pay',
                'format': 'JSON',
                'charset': 'UTF-8',
                'sign_type': 'RSA2',
                'timestamp': new Date().Format('yyyy-MM-dd HH:mm:ss'),
                'version': '1.0',
                'return_url': returnUrl,
                'notify_url': notifyUrl, // 确保使用完整URL
                // 注意：在实际环境中，必须添加sign参数
                // 这里添加一个占位符用于调试
                'sign': 'debug_sign_placeholder', // 实际环境中需要通过私钥签名生成
                'biz_content': JSON.stringify({
                    'out_trade_no': orderId,
                    'product_code': 'FAST_INSTANT_TRADE_PAY',
                    'total_amount': formattedPrice, // 确保是两位小数格式
                    'subject': '中国梦想游票务支付订单',
                    'body': '中国梦想游票务订单',
                    'timeout_express': '90m' // 添加超时时间参数
                })
            };

            // 注意：在实际生产环境中，需要使用私钥对参数进行签名
            // 这里仅为演示，在沙箱环境中可能不需要实际签名也能访问测试环境
            // 但在正式环境必须添加sign参数
            console.log('备用表单创建完成，notify_url设置为:', notifyUrl);

            // 打印表单参数用于调试
            console.log('创建备用表单参数:', params);

            // 添加表单字段
            console.log('表单参数详情:');
            $.each(params, function (key, value) {
                console.log(key + ': ' + value);
                form.append($('<input/>', {
                    'type': 'hidden',
                    'name': key,
                    'value': value
                }));
            });

            // 添加注释字段，用于调试
            form.append($('<input/>', {
                'type': 'hidden',
                'name': '_debug_info',
                'value': 'alipay.html前端生成的表单 - ' + new Date().getTime()
            }));

            // 添加额外的调试信息
            console.log('表单即将提交到:', alipayGateway);
            console.log('notify_url参数值:', notifyUrl);
            console.log('请确保localhost:8081端口上的后端服务正在运行且/api/alipay/notify接口已正确配置');

            // 添加到页面并提交
            form.appendTo('body').submit().remove();
        }

        // 日期格式化扩展
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        };
    </script>

</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
<header class="am-header">
    <h1>支付宝电脑网站支付</h1>
</header>
<div id="main">
    <div id="tabhead" class="tab-head">
        <h2 id="tab1" class="selected" name="tab">付 款</h2>
    </div>

    <div id="body1" class="show" name="divcontent">
        <dl class="content">
            <dt>订单编号 ：</dt>
            <dd>
                <input id="order_id" readonly/>
            </dd>
            <hr class="one_line">
            <dt>订单名称 ：</dt>
            <dd>
                中国梦想游票务支付订单
            </dd>
            <hr class="one_line">
            <dt>付款金额 ：</dt>
            <dd>
                <input id="total_price" readonly/>
            </dd>
            <hr class="one_line">
            <dt></dt>
            <dd id="btn-dd">
                    <span class="new-btn-login-sp">
                        <button class="new-btn-login" onclick="Pay()" style="text-align: center;">付 款</button>
                    </span> <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>
            </dd>
        </dl>
    </div><!---->

    <!-- 支付宝支付结果处理 -->
    <div id="alipayResult" style="display:none;">
        <p>支付处理中，请稍候...</p>
    </div>
</div>
</body>

</html>
